/**
 * Created by ZYY on 2016/12/1.
 * 表格数据操作页面，使用jquery库编写逻辑
 */
$(function () {
    /*左侧菜单栏点击事件*/
    $("#content #con_left #left_nav #market_bt ").click(function () {
        $(this).siblings().removeClass("index_li");
        $(this).addClass("index_li");
        $("#con_center #map_view").siblings().css("display", "none");
        $("#con_center #map_view").css("display", "block");
    });
    $("#content #con_left #left_nav #bg_data ").click(function () {
        showTable(sortId,1,0,data);
        $(this).siblings().removeClass("index_li");
        $(this).addClass("index_li");
        $("#con_center #table_view").siblings().css("display", "none");
        $("#con_center #table_view").css("display", "block");
    });
    $("#content #con_left #left_nav #robot_bt ").click(function () {
        showStateTb(sortId,1,0,data2);
        $(this).siblings().removeClass("index_li");
        $(this).addClass("index_li");
        $("#con_center #table_robot").siblings().css("display", "none");
        $("#con_center #table_robot").css("display", "block");
    });


/*
     * 机器人消息表格数据处理
     * */
    /*解析json数据*/
    var data = [
        {id:1001,message:"问好",action:"说话"},
        {id:1002,message:"走路",action:"行动"},
        {id:1003,message:"转圈",action:"行动"},
        {id:1004,message:"唱歌",action:"说话"},
        {id:1005,message:"讲故事",action:"说话"},
        {id:1006,message:"导航",action:"导航"},
        {id:1007,message:"没机票",action:"网络购物"},
        {id:1008,message:"问天气",action:"导航"},
        {id:1009,message:"问好",action:"说话"},
        {id:1010,message:"向左转",action:"行动"},
        {id:1011,message:"向右转",action:"行动"},
        {id:1012,message:"前进",action:"行动"},
        {id:1013,message:"唱儿歌",action:"说话"},
        {id:1014,message:"讲故事",action:"说话"}
    ];
    //根据编号排序
    function sortId(a,b){
        return a.id-b.id;
    }
    //根据消息内容排序
    function sortMessage(x,y){
        return x.message.localeCompare(y.message);
    }
    //根据行为排序
    function sortAction(m,n) {
        return m.action.localeCompare(n.action);
    }

    //页面表格数据显示，参数，1：排序方法 2：当前页码 3：加数 4：json数据
    var all_article_page;// 定义一个页码，记录所有当前页码
    function showTable(method,nowpage,addpage,data) {
        $("#page ul").empty();   //清空页码ul列表
        // var url = "./getJson?method=1";
        all_article_page = nowpage + addpage ;// 获得当前页面的页码
        // $.getJSON(url, function (data) {
        /*var id = new Array();
         var message = new Array();
         var action = new Array();*/
        var flag = data.length;
        //  $.each(data.jsonArray, function(index) {
        /*id[flag] = data.jsonArray[index].id;
         message[flag] = data.jsonArray[index].message;
         action[flag] = data.jsonArray[index].action;*/
        //  flag ++;
        //    });
        //分页
        var main_pages = Math.ceil(flag/11);//总页数
        //判断调用此方法时传来的页数
        if(all_article_page <= main_pages && all_article_page > 0){ //页数大于0小于等于最多页数
            all_article_page = nowpage + addpage;
        }else {
            all_article_page = nowpage;  //否则页码不变
        }
        //根据页码，给列表元素数组定下 循环显示的开始值和结束值
        var start = (all_article_page-1) * 11;
        var end = all_article_page * 11 - 1;

        if(end >= flag){
            end = flag;
        }
        var newdata = data;
        //获得排序后的json数据
        newdata.sort(method);
        //从json中循环取出数据，DOM操作写入页面
        // var num = 0;  //数据总条数
        $("#table_view table tbody").empty();
        for(var i = start; i < end; i++){
            var num = i+1;
            //编写表格dom
            var str = '<tr><td>'+num+'</td><td>'+newdata[i].id+'</td><td>'+newdata[i].message+'</td><td>'+newdata[i].action+'</td></tr>';
            //插入页面表格中
            $("#table_view table tbody").append(str);
        }
        //插入页码，并编写页码点击事件
        if(flag>0){
            $("#page ul").append('<li id = "up"><a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>');
            var s;
            for(s = 1;s<=main_pages;s++){
                var down_page = '<li><a href="#">'+s+'</a></li>';
                $("#page ul").append(down_page);
            }
            $("#page ul").append('<li id = "next"><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>');
            var active_page = all_article_page +1;
            $("#page ul li:nth-child("+active_page+")").addClass("active");
            //页码点击事件
            //上一页
            $("#page ul #up").click(function(){
                showTable(method,nowpage,-1,data);
            })
            //下一页
            $("#page ul #next").click(function(){
                showTable(method,nowpage,1,data);
            })
            //中间 1 2 3……页
            $("#page ul li a").not("#page ul #up a,#page ul #next a").click(function(){
                var value = parseInt($(this).html());
                showTable(method,value,0,data);
            })
        }
        //  });
    }

    //下拉框变化监听事件
    $("#sortType").change(function () {
        var sortType = $("#sortType").val();
        switch(sortType){
            case "编号":showTable(sortId,1,0,data)
                break;
            case "消息内容":showTable(sortMessage,1,0,data)
                break;
            case "行为":showTable(sortAction,1,0,data)
                break;
        }
    });
    //刷新按钮点击事件
    $("#content #table_view #table_center #tb_menu .refresh button").click(function () {
        //应该是重新获取json数据
        showTable(sortId,1,0,data);  //重新加载表格数据
    });
    //模糊搜索点击事件
    $("#search button").click(function () {
        var keyWords = $("#search input").val();
        if(keyWords != null && keyWords !=""){
            searchByWords(keyWords);
        }
    });
    //模糊查询方法，主要方法是判断字符串是否出现在已有数据中
    function searchByWords(keyWords) {
        $("#table_view table tbody").empty();
        var newdata = new Array();
        for(var i=0; i<data.length; i++){
            if (data[i].id.toString().indexOf(keyWords) >= 0){
                newdata.push(data[i]);
            }else if (data[i].message.toString().indexOf(keyWords) >= 0){
                newdata.push(data[i]);
            }else if(data[i].action.toString().indexOf(keyWords) >= 0){
                newdata.push(data[i]);
            }else{}
        }
        showTable(sortId,1,0,newdata);
    }

    /*
     * 机器人状态表格数据处理
     * */
    /*解析json数据*/
    var data2 = [
        {id:1001,state:"正在运行",other_meg:"其他信息信息"},
        {id:1002,state:"已停止",other_meg:"其他信息信息"},
        {id:1003,state:"正在运行",other_meg:"其他信息信息"},
        {id:1004,state:"已停止",other_meg:"其他信息信息"},
        {id:1005,state:"正在运行",other_meg:"其他信息信息"},
        {id:1006,state:"正在运行",other_meg:"其他信息信息"},
        {id:1007,state:"已停止",other_meg:"其他信息信息"},
        {id:1008,state:"正在运行",other_meg:"其他信息信息"},
        {id:1009,state:"已停止",other_meg:"其他信息信息"},
        {id:1010,state:"正在运行",other_meg:"其他信息信息"},
        {id:1011,state:"正在运行",other_meg:"其他信息信息"},
        {id:1012,state:"已停止",other_meg:"其他信息信息"},
        {id:1013,state:"已停止",other_meg:"其他信息信息"},
        {id:1014,state:"正在运行",other_meg:"其他信息信息"}
    ];
    //根据运行状态排序
    function sortState(x,y){
        return x.state.localeCompare(y.state);
    }
    //根据其他信息排序
    function sortOther_meg(m,n) {
        return m.other_meg.localeCompare(n.other_meg);
    }

    //页面表格数据显示，参数，1：排序方法 2：当前页码 3：加数 4：json数据
    var all_state_page;// 定义一个页码，记录所有当前页码
    function showStateTb(method,nowpage,addpage,data) {
        $("#rt_page ul").empty();   //清空页码ul列表
        // var url = "./getJson?method=1";
        all_state_page = nowpage + addpage ;// 获得当前页面的页码
        // $.getJSON(url, function (data) {
        /*var id = new Array();
         var message = new Array();
         var action = new Array();*/
        var flag = data.length;
        //  $.each(data.jsonArray, function(index) {
        /*id[flag] = data.jsonArray[index].id;
         message[flag] = data.jsonArray[index].message;
         action[flag] = data.jsonArray[index].action;*/
        //  flag ++;
        //    });
        //分页
        var main_pages = Math.ceil(flag/11);//总页数
        //判断调用此方法时传来的页数
        if(all_state_page <= main_pages && all_state_page > 0){ //页数大于0小于等于最多页数
            all_state_page = nowpage + addpage;
        }else {
            all_state_page = nowpage;  //否则页码不变
        }
        //根据页码，给列表元素数组定下 循环显示的开始值和结束值
        var start = (all_state_page-1) * 11;
        var end = all_state_page * 11 - 1;

        if(end >= flag){
            end = flag;
        }
        var newdata = data;
        //获得排序后的json数据
        newdata.sort(method);
        //从json中循环取出数据，DOM操作写入页面
        // var num = 0;  //数据总条数
        $("#robot_center table tbody").empty();
        for(var i = start; i < end; i++){
            var num = i+1;
            //编写表格dom
            var str;
            if(newdata[i].state == "正在运行"){
                str = '<tr><td>'+num+'</td><td>'+newdata[i].id+'</td><td><span class="play_flag"></span>&nbsp;<span class="play_info">'
                          +newdata[i].state+'</span></td><td>'+newdata[i].other_meg+'</td><td><a href="#" class="details">查看详情</a></td></tr>';
            }else if(newdata[i].state == "已停止"){
                str = '<tr><td>'+num+'</td><td>'+newdata[i].id+'</td><td><span class="stop_flag"></span>&nbsp;<span class="stop_info">'
                    +newdata[i].state+'</span></td><td>'+newdata[i].other_meg+'</td><td><a href="#" class="details">查看详情</a></td></tr>';
            }
            //插入页面表格中
            $("#robot_center table tbody").append(str);
        }
        //插入页码，并编写页码点击事件
        if(flag>0){
            $("#rt_page ul").append('<li id = "up"><a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span></a></li>');
            var s;
            for(s = 1;s<=main_pages;s++){
                var down_page = '<li><a href="#">'+s+'</a></li>';
                $("#rt_page ul").append(down_page);
            }
            $("#rt_page ul").append('<li id = "next"><a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>');
            var active_page = all_state_page +1;
            $("#rt_page ul li:nth-child("+active_page+")").addClass("active");
            //页码点击事件
            //上一页
            $("#rt_page ul #up").click(function(){
                showStateTb(method,nowpage,-1,data);
            })
            //下一页
            $("#rt_page ul #next").click(function(){
                showStateTb(method,nowpage,1,data);
            })
            //中间 1 2 3……页
            $("#rt_page ul li a").not("#rt_page ul #up a,#rt_page ul #next a").click(function(){
                var value = parseInt($(this).html());
                showStateTb(method,value,0,data);
            })
        }
        //查看详情点击事件
        $("#content #table_robot #robot_center table .details").click(function () {
            $("#con_center #robot_info").siblings().css("display", "none");
            $("#con_center #robot_info").css("display", "block");
        });

    }

    //排序下拉框变化监听事件
    $("#rt_sortType").change(function () {
        var sortType = $("#rt_sortType").val();
        switch(sortType){
            case "机器人编号":showStateTb(sortId,1,0,data2)
                break;
            case "全部状态":showStateTb(sortState,1,0,data2)
                break;
            case "其他信息":showStateTb(sortOther_meg,1,0,data2)
                break;
        }
    });
    //状态下拉框变化监听事件
    $("#rt_cen").change(function () {
        var sortType = $("#rt_online").val();
        switch(sortType){
            case "全部状态":showStateTb(sortId,1,0,getDataByState("全部状态"))
                break;
            case "正在运行":showStateTb(sortState,1,0,getDataByState("正在运行"))
                break;
            case "已停止":showStateTb(sortOther_meg,1,0,getDataByState("已停止"))
                break;
        }
    });
    //刷新按钮点击事件
    $("#content #table_robot #robot_center #rt_menu .refresh button").click(function () {
        //应该是重新获取json数据
        showStateTb(sortId,1,0,data2);  //重新加载表格数据
    });
    //模糊搜索点击事件
    $("#rt_search button").click(function () {
        var keyWords = $("#rt_search input").val();
        if(keyWords != null && keyWords !=""){
            searchStateByWords(keyWords);
        }
    });
    //模糊查询方法，主要方法是判断字符串是否出现在已有数据中
    function searchStateByWords(keyWords) {
        $("#table_robot table tbody").empty();
        var newdata = new Array();
        for(var i=0; i<data2.length; i++){
            if (data2[i].id.toString().indexOf(keyWords) >= 0){
                newdata.push(data2[i]);
            }else if (data2[i].state.toString().indexOf(keyWords) >= 0){
                newdata.push(data2[i]);
            }else if(data2[i].other_meg.toString().indexOf(keyWords) >= 0){
                newdata.push(data2[i]);
            }else{}
        }
        showStateTb(sortId,1,0,newdata);
    }
    //根据状态关键字返回data数据
    function getDataByState(keyWords){
        var newdata = new Array();
        if(keyWords == "全部状态"){
            newdata = data2;
        }else{
            for(var i=0; i<data2.length; i++){
                if (data2[i].state.toString().indexOf(keyWords) >= 0){
                    newdata.push(data2[i]);
                }
            }
        }
        return newdata;
    }

    //机器人动态详情页面js操作
    //查看日志点击事件
    $("#content #robot_info #info_center .lookLog_bt ").click(function () {

        $("#con_center #log_view").siblings().css("display", "none");
        $("#con_center #log_view").css("display", "block");
    });


});
